<template lang="pug">
.scene.pos-r(ref='sceneRoot', v-show='isShow && showScene && sceneList')
  Scroll.scene-wrap(
    :data='getSceneList',
    :scrollX='true',
    :probe-type='3',
    ref='scrollSceneWrap'
  )
    ul.scene-list(ref='sceneListWrap')
      li.scene-list-item(
        v-for='(item, index) in getSceneList',
        ref='sceneItem',
        :title='item.title',
        :key='index',
        :style='[getComsumerStyle, sceneIndex == index ? getBdColorStyle : ""]',
        :class='["item", { active: sceneIndex == index && !item.isLock }]',
        @click.stop.prevent='handleSceneSwitch(item, index)'
      )
        .info(v-if='item.dec')
          i.iconfont.icon-info(
            @click.stop='showSceneInfo(item.title, item.dec)'
          )
        .lock(v-if='item.isLock')
          i.iconfont.icon-lock
        .img-box
          img(:style='getComsumerStyle', :src='item.full_thumb_url', alt='')
        .text.omit(:style='sceneIndex == index ? getColorStyle : ""')
          p(ref='text') {{ item.title }}

  Scroll.group-wrap(
    v-if='getSceneGroup && showSceneGroup',
    :data='getSceneGroup',
    :scrollX='true',
    ref='scrollGroupWrap'
  )
    ul.scene-group(v-if='getSceneGroup', ref='sceneGroupWrap')
      li.scene-group-item(
        ref='sceneGroupItem',
        v-for='(group, index) in getSceneGroup',
        :key='index',
        :title='group.album',
        @click='handleGroupSwitch(group.groupid, index)'
      )
        span.label.omit(
          :class='{ active: sceneGroupIndex == index }',
          :style='sceneGroupIndex == index ? getBgColorStyle : ""'
        ) {{ group.album }}
</template>

<script>
import Scroll from 'Comps/Scroll'
import themeMixin from '@/mixins/theme'
import sceneMixin from '../mixin/scene'

export default {
  name: 'sceneGroup',
  mixins: [themeMixin, sceneMixin],
  components: {
    Scroll
  },
  computed: {
    // 如果是白天黑夜模式，隐藏场景
    isShow() {
      let isshow = false
      if (this.getSceneList && this.getSceneList.length > 1) {
        isshow = true
        this.getSceneList.forEach(item => {
          if(item.switchscene_id  && item.switchscene_id !== 0){
            isshow = false
          }
        })
      }
      return isshow
    }
  }
}
</script>

<style lang="stylus">
@import '../../../assets/styles/scene.styl'

.theme-app-n, .theme-pc-n
  .scene
    margin auto
    background-color rgba(255, 255, 255, 0.2) !important
    .scene-wrap
      min-height 70px
      // text-align: center
    .scene-list
      .scene-list-item
        width 70px
        height 70px
        margin 0px 5px !important
        & > .lock
          line-height 70px
        & > img, .lock
          top 0
          left 0
        .text
          background-color rgba($black, 0.5)
    .scene-group
      height 20px
      .scene-group-item
        height 20px
        span
          min-width 50px
          padding 0 10px
          height 20px
          line-height 20px
          border-radius 25px
          font-size 12px

.new-template-app
  .scene
    .scene-group
      .scene-group-item
        span
          border-radius 4px
</style>
